<div class="container-fluid">
  <legend>Share Your Spot!</legend>
  <div class="row-fluid">
    <div class="span6">
      <form name="form" class="css-form" novalidate>
        <button type="submit" class="btn btn-large btn-primary btn-block" data-target="#modal" data-toggle="modal" ng-click="submit(spot)" ng-disabled="form.$invalid">
          <i class="icon-plus icon-white"/> Add
        </button>
      
        <label><i class="icon-comment"/> Name</label>
        <input ng-model="spot.name" class="span12" type="text" placeholder="Name the spot..." ng-minlength="3" x-webkit-speech required>

        <label><i class="icon-pencil"/> Summary</label>
        <textarea ng-model="spot.description" class="span12" rows="10" placeholder="Describe the spot..." ng-minlength="3" required/>

        <input type="hidden" ng-model="spot.location" required>
        <input type="hidden" ng-model="spot.ready" required>
      </form>

      <label><i class="icon-camera"/> Photos</label>
      <upload-gallery files="spot.photos" progress="getProgress()" onchange="readFiles" clear="clear()"/>
    </div>
    <div class="span6">
      <label class="muted"><i class="icon-map-marker"/> {{(spot.address|mailingAddress) || 'Address'}}</label>
      <div id="mapCanvas" ui-map="map" style="height: 48em"/>
      <div ui-map-marker="marker" ui-event="{'map-dragend': 'handleDragEnd(marker)'}"/>
    </div>
  </div>
</div>
<div id="modal" class="modal hide fade" ui-jq="modal" tabindex="-1" role="dialog">
  <div class="modal-header">
    <h3>{{spot.name}}</h3>
  </div>
  <div class="modal-body upload-modal">
    <upload ng-repeat="(name, photo) in photos.uploads" file="photo"/>
  </div>
  <div class="modal-footer">
    <a class="btn btn-success" data-target="#modal" data-dismiss="modal" ng-href="#/s/{{spot.id}}" ng-disabled="!photos.isComplete()">
      View the Spot! <i class="icon-white icon-arrow-right"/> 
    </a>
  </div>
</div>